<template>
	<div class="InitCps-view">
		<div class="row-itme">
			<div class="label">
				{{ $t("message.environmentSetting.init.label_17") }}
			</div>
			<el-input v-model="tabData.drwPass" class="input-style orange"
				:disabled="tabData.envIsEdit != 0"></el-input>
			<el-button type="primary" size="small" style="margin-left: 20px;" @click="ManualAnsyncFileFn">更新</el-button>
		</div>
		<div class="row-itme">
			<div class="label">
				{{ $t("message.environmentSetting.init.label_18") }}
			</div>
			<el-input v-model="tabData.repPass" class="input-style orange"
				:disabled="tabData.envIsEdit != 0"></el-input>
		</div>
		<div class="row-itme" style="height: 42px;padding-top: 10px;border-top:1px dashed #9e9e9e ;">
			<div class="label">
				{{ $t("message.environmentSetting.init.label_1") }}
			</div>
			<el-select v-model="tabData.drwMode" placeholder="" size="mini" class="input-style orange">
				<el-option v-for="item in public_img" :key="item.key" :label="item.value" :value="item.key">
				</el-option>
			</el-select>
		</div>

		<div class="row-itme">
			<div class="label">
				{{ $t("message.environmentSetting.init.label_2") }}
			</div>
			<el-input v-model="tabData.copName" class="input-style orange"
				@input="tabData.copName = $setMaxLength(tabData.copName, 60)"></el-input>
		</div>

		<div class="row-itme">
			<div class="label">
				{{ $t("message.environmentSetting.init.label_3") }}
			</div>
			<el-select v-model="tabData.dateDsp" placeholder="" size="mini" class="input-style orange">
				<el-option v-for="item in printing" :key="item.key" :label="item.value" :value="item.key">
				</el-option>
			</el-select>
		</div>

		<!-- <div class="row-itme">
			<div class="label">
				{{ $t("message.environmentSetting.init.label_4") }}11
			</div>
			<el-select v-model="tabData.loadMode" placeholder="" size="mini" class="input-style orange">
				<el-option v-for="item in login_control" :key="item.key" :label="item.value" :value="item.key">
				</el-option>
			</el-select>
		</div> -->

		<div class="row-itme">
			<div class="label">
				{{ $t("message.environmentSetting.init.label_5") }}
			</div>
			<el-input v-model="tabData.seaStaMm" class="samll-ipt tr orange"
				oninput="if(value){value=value.replace(/[^\d]/g,'')} if(value<=0){value=0} if(value>12){value=12}"></el-input>
			<span class="describe">{{
				$t("message.environmentSetting.init.label_6")
			}}</span>
		</div>

		<div class="row-itme">
			<div class="label">
				{{ $t("message.environmentSetting.init.label_7") }}
			</div>
			<el-input v-model="tabData.plnAcCnt" class="samll-ipt tr orange"
				oninput="if(value){value=value.replace(/[^\d]/g,'')} if(value<=0){value=0} if(value>30){value=30}"></el-input>
			<span class="describe">{{
				$t("message.environmentSetting.init.label_8")
			}}</span>
		</div>

		<div class="row-itme">
			<div class="label">
				{{ $t("message.environmentSetting.init.label_9") }}
			</div>
			<el-input v-model="tabData.accAcCnt" class="samll-ipt tr orange"
				oninput="if(value){value=value.replace(/[^\d]/g,'')} if(value<=0){value=0} if(value>30){value=30}"></el-input>
			<span class="describe">{{
				$t("message.environmentSetting.init.label_10")
			}}</span>
		</div>

		<!-- <div class="row-itme">
			<div class="label">
				{{ $t("message.environmentSetting.init.label_15") }}
			</div>
			<el-input v-model="tabData.setFlg" class="samll-ipt tr orange"
				oninput="if(value){value=value.replace(/[^\d]/g,'')} if(value<=0){value=0} if(value>30){value=30}"></el-input>
			<span class="describe">{{ $t("message.environmentSetting.init.label_16") }}</span>
		</div> -->

		<div class="row-itme">
			<div class="long-label">
				{{ $t("message.environmentSetting.init.label_11") }}
			</div>
			<el-radio-group v-model="tabData.secCode" class="radio-view">
				<el-radio :label="1">{{
					$t("message.environmentSetting.init.radio_1")
				}}</el-radio>
				<el-radio :label="0">{{
					$t("message.environmentSetting.init.radio_2")
				}}</el-radio>
			</el-radio-group>
		</div>

		<div class="row-itme">
			<div class="long-label">
				{{ $t("message.environmentSetting.init.label_12") }}
			</div>
			<el-radio-group v-model="tabData.basPlnFlg" class="radio-view">
				<el-radio :label="1">{{
					$t("message.environmentSetting.init.radio_1")
				}}</el-radio>
				<el-radio :label="0">{{
					$t("message.environmentSetting.init.radio_2")
				}}</el-radio>
			</el-radio-group>
		</div>

		<!-- <div class="row-itme">
			<div class="long-label">
				{{ $t("message.environmentSetting.init.label_13") }}11
			</div>
			<el-radio-group v-model="tabData.useUpLoad" class="radio-view">
				<el-radio :label="1">{{
					$t("message.environmentSetting.init.radio_1")
				}}</el-radio>
				<el-radio :label="0">{{
					$t("message.environmentSetting.init.radio_2")
				}}</el-radio>
			</el-radio-group>
		</div> -->

		<div class="row-itme row-itme-two">
			<div class="long-label in-start">
				{{ $t("message.environmentSetting.init.label_14") }}
			</div>

			<div class="radio-input-view">
				<el-radio-group v-model="SignPassCyc" class="in-radio-view">
					<el-radio :label="0">{{
						$t("message.environmentSetting.init.radio_1")
					}}</el-radio>
					<el-radio :label="1">{{
						$t("message.environmentSetting.init.radio_2")
					}}</el-radio>
				</el-radio-group>

				<div class="in-input-view">
					<el-input v-model="tabData.passCyc" :class="SignPassCyc == 0 ? 'samll-ipt-disable' : 'samll-ipt'"
						class="tr orange" :disabled="SignPassCyc == 1"
						oninput="if(value){value=value.replace(/[^\d]/g,'')} if(value<=0){value=0} if(value>90){value=90}"></el-input>

					<span class="describe">{{
						$t("message.environmentSetting.init.label_101")
					}}</span>
				</div>
			</div>
		</div>

		<div class="footer">
			<el-button @click="creatKscreenshot">
				{{ $t("message.environmentSetting.btns.bottomBtn.editor") }}
			</el-button>
			<el-button type="primary" class="okBTn" @click="saveData">
				{{ $t("message.environmentSetting.btns.bottomBtn.save") }}
			</el-button>
		</div>
	</div>
</template>

<script>
import { getOption, UpdateOption, GetRequiredTipsMsg, ManualAnsyncFile } from "@/api/api.js";
import { getLocalStorage } from "@/utils/storage";
import { showLoading, hideLoading } from "@/utils/loading";
// import kscreenshot from "kscreenshot";
export default {
	name: "InitCps",
	data() {
		return {
			value: "",
			options: "",
			radio: 3,
			public_img: [
				{
					value: this.$t("message.initSelect.label_1"),
					key: 0,
				},
				{
					value: this.$t("message.initSelect.label_2"),
					key: 1,
				},
				{
					value: this.$t("message.initSelect.label_3"),
					key: 2,
				},
				{
					value: this.$t("message.initSelect.label_4"),
					key: 3,
				},
			],
			public_img_value: "",
			printing: [
				{
					value: this.$t("message.initSelect.label_5"),
					key: 0,
				},
				{
					value: this.$t("message.initSelect.label_6"),
					key: 1,
				},
			],
			printing_value: "",
			login_control: [
				{
					value: this.$t("message.initSelect.label_7"),
					key: 0,
				},
				{
					value: this.$t("message.initSelect.label_8"),
					key: 1,
				},
			],
			login_control_value: "",
			tabData: {
				type: 1,
				drwPass: "",
				repPass: "",
				drwMode: null,
				copName: "",
				dateDsp: null,
				loadMode: null,
				seaStaMm: "",
				plnAcCnt: null,
				accAcCnt: null,
				secCode: null,
				basPlnFlg: null,
				useUpLoad: null,
				passCyc: null,
			},
			SignPassCyc: 0,
		};
	},
	components: {},
	watch: {

		SignPassCyc: {
			handler(nVal, oVal) {
				console.log(nVal);
				if (nVal == 1) {
					this.tabData.passCyc = 0;
				} else {
					this.tabData.passCyc = 1;
				}
			},
			immediate: true,
			deep: true,
		},
	},
	methods: {
		async ManualAnsyncFileFn() {
			showLoading();

			let res = await ManualAnsyncFile({
				UserId: getLocalStorage("userID")
			})
			hideLoading();

			if (res.data.code != 0) {
				this.$alert(res.data.msg, '', {
	confirmButtonText: 'OK',
	type: 'warning',
});
				return;
			}
			this.$message({
				message: res.data.msg,
				type: "success",
			});

			this.getOptionApi();
		},
		getOptionApi() {
			let dataJson = {
				drw_flg: 1,
				type: 1,
			};
			getOption(dataJson).then((res) => {
				console.log(res);
				if (res.data.code != 0) {
					return;
				}
				this.tabData = res.data.data;
				this.SignPassCyc = this.tabData.passCyc == 0 ? 1 : 0;
				console.log(this.tabData)
			});
		},
		async saveData() {
			if (this.tabData.copName == '') {
				let R = await GetRequiredTipsMsg();
				this.$alert(R.data.msg, {
					confirmButtonText: 'OK',
					type: 'warning',
					callback: action => {
					}
				});
				return
			}

			this.tabData.plnAcCnt = parseInt(this.tabData.plnAcCnt);
			this.tabData.accAcCnt = parseInt(this.tabData.accAcCnt);
			// debugger
			this.tabData.passCyc = this.SignPassCyc == 1 ? 0 : this.tabData.passCyc;
			this.tabData.passCyc = parseInt(this.tabData.passCyc);
			this.tabData.type = 1;
			this.tabData.setFlg = isNaN(this.tabData.setFlg) || this.tabData.setFlg == 0 ? '0' : `${this.tabData.setFlg}`;
			this.tabData.UserId = getLocalStorage("userID");
			this.tabData.Account = getLocalStorage("userName");


			showLoading();
			UpdateOption(this.tabData)
				.then((res) => {
					hideLoading();
					if (res.data.code != 0) {
						this.$alert(res.data.msg, '', {
	confirmButtonText: 'OK',
	type: 'warning',
});
						return;
					}
					this.$message({
						message: res.data.msg,
						type: "success",
					});

					this.getOptionApi();
				})
				.catch(() => {
					this.$alert(res.data.msg, '', {
	confirmButtonText: 'OK',
	type: 'warning',
});
				});
		},
		creatKscreenshot() {
			this.getOptionApi();
			return;
			// this.$nextTick(function () {
			//   new kscreenshot({
			//     key: 65,
			//     immediately: true,
			//     endCB: function (noob) {
			//       console.log(noob);
			//     },
			//   }).startScreenShot();
			// });
		},
	},
	created() {
		this.getOptionApi();
	},
	mounted() { },
	beforeDestroy() { },
	destroyed() { },
};
</script>
<style lang="scss" scoped>
.InitCps-view {
	width: 100%;
	height: 100%;
	position: relative;
}

.row-itme {
	width: 50%;
	min-width: 588px;
	max-width: 588px;
	margin-bottom: 12px;
	height: 32px;
	display: flex;
	justify-content: flex-start;
	align-items: center;

	.label {
		width: 206px;
		height: 100%;
		min-width: 206px;
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #333333;
	}

	.long-label {
		width: 368px;
		height: 100%;
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #333333;
	}

	.in-start {
		align-items: flex-start;
	}

	.radio-input-view {
		display: flex;
		flex-direction: column;
		background: #ffffff;
		border-radius: 2px;
		border: 1px solid #d9d9d9;
		width: 252px;
		height: 72px;
		padding: 5px 24px;

		.in-radio-view {
			// box-sizing: border-box;
			height: 32px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}

		.in-input-view {
			// width: 252px;
			height: 32px;

			display: flex;
			align-items: center;
			justify-content: flex-start;
		}
	}

	.radio-view {
		padding: 0 24px;
		width: 252px;
		height: 32px;
		background: #ffffff;
		border-radius: 2px;
		border: 1px solid #d9d9d9;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.input-style {
		width: 382px;

		::v-deep .el-input__inner {
			border: 1px solid #d9d9d9;
			height: 32px;
			background: #ffffe1;
			font-size: 14px;
			color: #333333;
			font-weight: bold;
		}

		::v-deep .el-input .el-select__caret {
			width: 32px;
			height: 32px;
		}

		::v-deep .el-input__suffix {
			right: 0;
			background: #f5f6f7;
			border: 1px solid #d9d9d9;
		}
	}

	.orange {
		::v-deep .el-input__inner {
			background: rgb(255, 222, 172) !important;
		}
	}

	.samll-ipt {
		width: 48px;
		height: 32px;

		::v-deep .el-input__inner {
			border: 1px solid #d9d9d9;
			height: 32px;
			background: #ffffe1;
			font-size: 14px;
			color: #333333;
			font-weight: bold;
		}
	}

	.samll-ipt-disable {
		width: 48px;
		height: 32px;

		::v-deep .el-input__inner {
			border: 1px solid #d9d9d9;
			height: 32px;
			background: #ffffe1;
			font-size: 14px;
			color: gray;
			font-weight: bold;
		}
	}

	.describe {
		display: block;
		margin-left: 8px;
		font-size: 14px;
		color: #1f2329;
		// font-weight: bold;
	}
}

.row-itme-two {
	height: 72px;
}

.tr {
	::v-deep .el-input__inner {
		text-align: right;
	}
}

.footer {
	position: absolute;
	left: 0px;
	bottom: 50px;
	height: 32px;
	display: flex;

	button {
		width: 123px;
		height: 32px;
		// background: #ffffff;
		// border: 1px solid #d9d9d9;
		text-align: center;
		line-height: 32px;
		margin-right: 16px;
		line-height: 0;
	}

	.okBTn {
		// background: #106ebe;
		// color: #fff;
	}
}
</style>
